<template>
  <div>
    <div class="nav clearFix">
      <img class="logo" :src="url" alt="">
      <div class="navbar">
        <div class="nav_item" :class="{'router-link-active':0== $store.state.classTYpe }" @click="toHome">首页</div>
        <div class="nav_item" :class="{'router-link-active':1== $store.state.classTYpe }" @click="toAnle">案例展示</div>
        <div class="nav_item" :class="{'router-link-active':2== $store.state.classTYpe }" @click="toKaifa">开发流程</div>
        <div class="nav_item" :class="{'router-link-active':3== $store.state.classTYpe }" @click="toZixun">资讯动态</div>
        <div class="nav_item" :class="{'router-link-active':4== $store.state.classTYpe }" @click="toUs">关于我们</div>
      </div>
      <div class="phone clearFix">
        <img src="@/assets/images/tel.png" alt="" class="phone_img">
        <p class="phone_num">{{tel}}</p>
      </div>
    </div>
    <div class="kong"></div>
  </div>
</template>

<script>
import {getWebsiteData} from '@/api/getData'
export default {
  name: "NavigationBar",
  data(){
    return {
      url:'',
      tel:'',
    }
  },
  created(){
    this.getWebsiteDataList()
  },
  methods:{
    // 获取产品中心高度 1987 
    // 开发流程3528
    toHome(){
      this.$store.commit('changeIndex', 0)
      this.$router.push({
        path:'/home',
      });
      document.documentElement.scrollTop=0
    },
    toAnle(){
      this.$store.commit('changeIndex', 1)
      this.$router.push({
        path:'/home',
      });
       setTimeout(()=>{
        document.documentElement.scrollTop=1787
      }, 500)
      
    },
    toKaifa(){
      this.$store.commit('changeIndex', 2)
      this.$router.push({
        path:'/home',
      });
      setTimeout(()=>{
        document.documentElement.scrollTop=3498
      }, 500)
    },
    toZixun(){
      this.$store.commit('changeIndex', 3)
      document.documentElement.scrollTop=0
      this.$router.push({
        path:'/news',
      });
    },
    toUs(){
      this.$store.commit('changeIndex', 4)
      document.documentElement.scrollTop=0
      this.$router.push({
        path:'/about',
      });
    },
    // 获取锚点
    go(){
      window.onscroll= function(){
        //变量t是滚动条滚动时，距离顶部的距离
        var t = document.documentElement.scrollTop||document.body.scrollTop;
        console.log(t);
      }
    },
    // 获取官网数据
    async getWebsiteDataList(){
      try {
          const res = await getWebsiteData({}).then(res=>{
            if (res.code == 0) {
              this.url=res.data.website_logo
              this.tel=res.data.mobile
            } else {
              
            }
          })
      } catch (error) {}
    },
  }
}
</script>

<style scoped lang="scss">
.kong{
  width: 100%;
  height: 80px;
}
.nav{
  width: 100%;
  height: 80px;
  margin: 0 auto;
  padding-left: 16%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 10000;
  .logo,.navbar,.phone{
    float: left;
  }
  .logo{
    width: 181px;
    height: 49px;
    margin-top: 15px;
  }
  .navbar{
    margin-left: 100px;
    .nav_item{
      width: 90px;
      height: 80px;
      line-height: 80px;
      margin-left: 50px;
      display: block;
      box-sizing: border-box;
      text-align: center;
      font-size: 22px;
      float: left;
      color: #000;
      cursor: pointer;
    }
    .nav_item:hover{
      border-bottom: 4px solid #004EA2;
    }
  }

  .phone{
    margin-left: 155px;
    align-items: center;
    .phone_img,.phone_num{
      float: left;
    }
    .phone_img{
      width: 36px;
      height: 32px;
      margin-top: 23px;
      margin-left: 23px;
    }
    .phone_num{
      font-size: 28px;
      margin-top: 23px;
      margin-left: 20px;
      color: #004EA2;
    }
  }
}
.router-link-active{
  border-bottom: 4px solid #004EA2;
}
</style>